<template>
    <suspense>
        <template #default>
            <a-config-provider :locale="zhCN" :theme="theme">
                <router-view v-slot="{ Component }">
                    <component :is="Component" v-mask="showMask" />
                </router-view>
            </a-config-provider>
        </template>
        <template #fallback>
            <a-spin size="large" class="app-spin"></a-spin>
        </template>
    </suspense>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    onMounted,
    reactive,
    computed,
    provide
} from 'vue'
import { useUserStore } from '@/store/modules/user'
import { useAppStore } from '@/store/modules/app'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
// import { setConfigProvider } from "@vue-ant-plus/hooks";
// setConfigProvider({
//   tinymce: {
//     language_url: "/tinymce/langs/zh_CN.js", //引入语言包文件
//     language: "zh_CN", //语言类型
//     skin_url: "/tinymce/skins/ui/oxide", // 主题文件
//     content_css: "/tinymce/skins/content/default/content.css",
//   },
//   table: {
//     paginationConfig: {
//       currentKey: "pages",
//     },
//   },
//   permission: ["1", "2", "3"],
// });
export default defineComponent({
    name: 'App',
    setup() {
        const loading = ref(true)
        const userStore = useUserStore()
        const theme = computed(() => userStore.getTheme)
        const appStore = useAppStore()
        const showMask = computed(() => appStore.getMask)
        onMounted(() => {
            loading.value = false
        })
        return {
            loading,
            zhCN,
            theme,
            showMask
        }
    }
})
</script>

<style lang="less">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
    .app-spin {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>
